Leo's Space

我寫故我在

0%

[Day1] 建立 Vue 開發環境

發表於 更新於 分類於 ， Disqus：
文章字數： 1.3k 所需閱讀時間 ≈ 1 分鐘

1.安裝編譯器

  • VScode 安裝

  • VScode 插件安裝

    • Chinese (Traditional) Language Pack for Visual Studio Code
      • 幫你把 VScode 繁體化
    • Preview on Web Server
      • 安裝完之後，在編譯器建立的 index.html 檔上按shift+control+L，就可以開啟一個虛擬 Web Server 來開啟你的首頁程式，Server 網址是http://localhost:8080/index.html ，而不是一般在 index.html 點擊兩下，使用本地端 file://… 的方式打開首頁程式。使用這個插件好處是當你網頁程式有所更動時，網頁畫面也會隨著程式自動更新，不用再重新啟動瀏覽器，增加開發效率。
      • 如果之後有學到 Vue Cli ，在執行發佈指令 npm run build 後，會將構建完成的檔案放到dist 資料夾中，這個資料夾內的 index.html 就無使用本地端 file://… 的方式直接打開，而是必須透過 Web Server 開啟。
    • Vue
      • 會自動將 Vue.js 相關程式語法給 Hightlight 起來。
    • Vue 2 Snippets
      • VScode 會自動跳出 Vue.js 關鍵字的補字。

  • 個人推薦插件

    • Bracket Pair Colorizer
      • 自動幫你將成對的大括弧還有小括弧加上顏色，使人更容易對齊程式碼
    • indent-rainbow
      • 將程式碼縮排的部分增加顏色，使人更容易對齊程式碼
    • TabNine
      • 根據你的輸入習慣，透過機器學習推薦程式碼補字片段給你
    • vscode-icons
      • 將你 VScode 檔案欄位的檔案加上相對應的小圖標

        2.安裝 chrome 擴充套件

  • Vue.js devtools

    • 好用的 Vue 除錯工具，可以查看整個 Vue 結構還有資料狀況，下載後如果有導入 Vue 檔，Vue 除錯工具就會出現在 chrome 除錯工具內，所以一開始下載完套件，Chrome 除錯台沒出現 Vue 除錯工具是正常的。

3.載入Vue檔案

  • Vue.js官網教學文件

    • Vue 檔案有分正式版還有開發版，建議選擇開發版，可以調用開法者工具，還有較完整的除錯提示。如果分別下載開發版本及生產版本，會發現開發版是 vue.js ，生產版是 vue.min.js ，文件上也提醒開發完成程式要上線時，記得把要把開發時引用的 vue.js 檔案更改為 vue.min.js。

      http://i.imgur.com/CxPK1UR.png

    • 如果不想下載 Vue 檔案，Vue 也可以像是 jQuery 一樣，使用 CDN 的方式導入 Vue 相關檔案，我是選擇直接載入最新版，而沒有指定版本號，如果要指定版本號方式載入，記得要在載入檔案後面加上 /dist/vue.js，才會在 Vue 除錯工具看到 Vue 的載入版本號，也代表 Vue 成功載入。

      https://i.imgur.com/7HjXIHD.png

4.開發環境準備完成

1
2
3
4
5
6
<html>
<body>
</body>
<script src="<https://cdn.jsdelivr.net/npm/vue/dist/vue.js>"></script>
</html>

https://i.imgur.com/zx5jwsH.png

如果對文章有任何問題或者文章有誤歡迎底下留言，感謝～
明天讓我們建立自己第一支 Vue 應用程式。